<script setup lang="ts">
import MapShow from '@/components/MapShow'
import TrackingDrawer from '@/components/TrackingDrawer.vue'
import VideoShow from '@/components/VideoShow'
import {
  useHistory,
  useInternational,
  useLogout,
  useManagement,
  useNotification,
  useTheme
} from '@/composables'
import { useSwitchComponents } from '@/stores/switchComponents'
import { RouterView } from 'vue-router'
import { version } from '../../package.json'
// const { CarRelevantController } = useCarRelevant()

// 视频流地址切换
// const { DetailSection } = useDetail({ isMobile })
const { HistoryController } = useHistory()
const { LogoutController } = useLogout()
const { NotificationDrawer } = useNotification()
const { ThemeController } = useTheme()
const { InternationalController } = useInternational()
const { PermissonManagement } = useManagement()
const switchComponents = useSwitchComponents()
</script>

<template>
  <el-container id="container" class="h-full">
    <el-container class="z-[9] p-4">
      <el-header>
        <div class="h-full flex items-center justify-between overflow-y-auto">
          <!-- <CarRelevantController /> -->
          <div class="flex items-center justify-end w-full">
            <span class="mr-3">v{{ version }}</span>
            <ThemeController />
            <InternationalController />
            <HistoryController />
            <PermissonManagement />
            <LogoutController />
          </div>
        </div>
      </el-header>
      <el-main style="--el-main-padding: 0">
        <RouterView v-slot="{ Component }">
          <keep-alive> <component :is="Component" /></keep-alive>
        </RouterView>
      </el-main>
      <TrackingDrawer />
    </el-container>
    <el-aside width="20vw" class="flex flex-col pr-4 pt-2 h-full">
      <div class="border border-sky-400">
        <NotificationDrawer />
      </div>

      <div class="flex-1 pt-2 pb-4" @click="switchComponents.switchEvent">
        <MapShow v-show="!switchComponents.showComponent" />
        <VideoShow v-show="switchComponents.showComponent" />
      </div>
    </el-aside>
  </el-container>
  <!-- <DetailSection /> -->
  <!-- <CarRelevantDrawer /> -->

  <!-- <CarDialog /> -->
</template>

<style scoped lang="scss">
.dark #container {
  background-color: #072232;
}
:deep(.maptalks-attribution) {
  display: none !important;
}
</style>
